import React, { useEffect, useState } from 'react'
import style from './personContactSet.module.scss'
import { MailIcon, PhoneIcon, TelegramIcon } from '../../../images/icons'
import { TELEGRAM_BASE_URL } from '../../../starter/constants'
import { Tooltip } from 'antd'

type IPersonContactSet = {
  person: any
}
const PersonContactSet = ({ person }: IPersonContactSet) => {
  const [showPhoneMessage, setShowPhoneMessage] = useState<boolean>(false)

  useEffect(() => {
    if (showPhoneMessage) {
      setTimeout(() => {setShowPhoneMessage(false)}, 3000)
    }
  }, [showPhoneMessage])
  return (
    <div className={style.wrapper} onClick={(e) => {e.stopPropagation()}}>
      { person.phone &&
        <div className={style.iconLink}
             onClick={() => {navigator.clipboard.writeText(person.phone); setShowPhoneMessage(true) }}
        >
          <Tooltip
            open={showPhoneMessage}
            title={<span>Номер телефона скопирован в буфер обмена</span>}
          >
            <PhoneIcon/>
          </Tooltip>
        </div>
      }
      { person.email &&
        <a href={`mailto:${person.email}`}>
          <div className={style.iconLink}>
            <MailIcon/>
          </div>
        </a>

      }
      { person.telegram &&
        <a href={`${TELEGRAM_BASE_URL}${person.telegram}`} target="_blank">
          <div className={style.iconLink}>
            <TelegramIcon/>
          </div>
        </a>
      }
    </div>
  )
}

export default PersonContactSet
